*{box-sizing:border-box;}
body{
  background:white;
}
.rainbow{
  height:200px;
  overflow:hidden;  /*隐藏溢出*/
}
.rainbow div{
  overflow:hidden;  /*overflow也可以作用于阻止Margin合并*/
}
.rainbow >div{
  width:400px;
  height:400px;
  background:red;
  border-radius:50%;
}
.rainbow >div >div{
  background:hsl(60,80%,50%);  /*h色相s饱和度l亮度*/
  height:380px;
  margin:10px;  /*边框*/
  border-radius:50%;
}
.rainbow >div >div >div{
  background:hsl(120,80%,50%);
  height:360px;
  margin:10px;
  border-radius:50%;
}
.rainbow >div >div >div >div{
  background:hsl(180,80%,50%);
  height:340px;
  margin:10px;
  border-radius:50%;
}
.rainbow >div >div >div >div >div{
  background:hsl(240,80%,50%);
  height:320px;
  margin:10px;
  border-radius:50%;
}
.rainbow >div >div >div >div >div >div{
  background:hsl(300,80%,50%);
  height:300px;
  margin:10px;
  border-radius:50%;
}
.rainbow >div >div >div >div >div >div >div{
  background:hsl(330,80%,50%);
  height:280px;
  margin:10px;
  border-radius:50%;
}
.rainbow >div >div >div >div >div >div >div >div{
  background:hsl(330,80%,100%);
  height:260px;
  margin:10px;
  border-radius:50%;
}